<template>
  <div id="app">
           <div class="header">
      <ul>
        <li class="li1">
          <p><span @click="dialogFormVisible=true">{{text1}}</span>|<span @click="dialogFormVisible1=true">注册</span></p>
        </li>
        <li class="li1" @click="$router.push('/order')">我的订单</li>
        <li class="li1" @click="$router.push('/collect')">我的收藏</li>
        <li class="li1 li2" @click="$router.push('/shoppingCart')"><span class="el-icon-shopping-cart-full"></span >购物车<span>0</span></li>
      </ul>
    </div>
    <div class="box">
           <div class="title">
      <p>
        <img src="http://101.132.181.9/img/logo.c8999c02.png" alt="" />
      </p>
      <p>
        <el-menu mode="horizontal" active-text-color="blue">
          <el-menu-item index="1" @click="$router.push('/home')">首页</el-menu-item>
          <el-menu-item index="2" @click="$router.push('/goods')"
            >全部商品</el-menu-item
          >
          <el-menu-item index="3" @click="$router.push('/about')"
            >关于我们</el-menu-item
          >
        </el-menu>
      </p>

      <el-input placeholder="请输入内容" class="search">
        <el-button slot="append" icon="el-icon-search"></el-button>
      </el-input>
    </div>
      <el-divider></el-divider>
    </div>
    <!-- 登录弹框 -->
    <el-dialog title="登录" :visible.sync="dialogFormVisible" width="250px" height="200px">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="10px" class="demo-ruleForm">
  <el-form-item label="" prop="userName" class="">
    <el-input v-model="ruleForm.userName" prefix-icon="el-icon-user-solid" placeholder="请输入账号"></el-input>
  </el-form-item>
  <el-form-item label="" prop="password">
    <el-input v-model="ruleForm.password" prefix-icon="el-icon-view" placeholder="请输入密码"></el-input>
  </el-form-item>
</el-form>
  <div slot="footer" class="dialog-footer">
    <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
  </div>
</el-dialog>

<!-- 注册弹框 -->
   <el-dialog title="注册" :visible.sync="dialogFormVisible1" width="300px" height="250px">
    <el-form :model="ruleForm1" :rules="rules1" ref="ruleForm1" label-width="10px" class="demo-ruleForm">
  <el-form-item label="" prop="userName" class="">
    <el-input v-model="ruleForm1.userName" prefix-icon="el-icon-user-solid" placeholder="请输入账号"></el-input>
  </el-form-item>
  <el-form-item label="" prop="password">
    <el-input v-model="ruleForm1.password" prefix-icon="el-icon-view" placeholder="请输入密码"></el-input>
  </el-form-item>
  <el-form-item label="" prop="qrpassword">
    <el-input v-model="ruleForm1.qrpassword" prefix-icon="el-icon-view" placeholder="请再次输入密码"></el-input>
  </el-form-item>
</el-form>
  <div slot="footer" class="dialog-footer">
    <el-button type="primary" @click="submitForm1('ruleForm1')">注册</el-button>
  </div>
</el-dialog>

    <router-view /> 
     <footer>
      <div class="top">
          <div class="top1">
              <ul>
                <li>
                  <img src="./assets/imgs/1.png" alt="">
                  七天无理由退货</li>
                <li>
                  <img src="./assets/imgs/1.png" alt="">
                  满99元全场免邮</li>
                <li>
                  <img src="./assets/imgs/1.png" alt="">
                  100%品质保证</li>
              </ul>
          </div>
      </div>
      <div class="bottom">
          <div class="bottom1">
            <img src="./assets/imgs/github.png" alt="">
            <p>
                <a>首页</a>
              <a>|</a>
              <a>全部商品</a>
              <a>|</a>
              <a>关于我们</a>
            </p>
              
            <p>商城版权所有&nbsp;&copy;&nbsp;2012-2021</p>
          </div>
      </div>
    </footer>
  </div>
</template>

<script>
import {login, shoppingCart,registerUser } from "@/api/api.js";
 export default {
  data() {
    return {
      text1:'登录',
        dialogFormVisible:false,
        dialogFormVisible1:false,
           ruleForm: {
              userName:"",
              password:"",
        },
        rules: {
          username: [
            { required: true, message: '请输入账号', trigger: 'blur' },
            { min: 5, max: 16, message: '长度在 5 到 16 个字符', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 3, max:16, message: '长度在 3 到 16个字符', trigger: 'blur' }
          ],
           
        },
           ruleForm1: {
              userName:"",
              password:"",
              qrpassword:"",
        },
        rules1: {
          username: [
            { required: true, message: '请输入账号', trigger: 'blur' },
            { min: 5, max: 16, message: '长度在 5 到 16 个字符', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 3, max:16, message: '以字母开头长度在 3 到 16个字符', trigger: 'blur' }
          ],
          qrpassword: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 3, max:16, message: '以字母开头长度在 3 到 16个字符', trigger: 'blur' }
          ],
           
        }
    
    }
  },
  created() {
  },

  methods: {
     submitForm(formName) {//登录
        this.$refs[formName].validate(async (valid) => {
          if (valid) {
                let res=await login(this.ruleForm)
                // let user_id=res.user.user_id
                // let obj={
                //   ...this.ruleForm,
                //   user_id
                // }
                console.log(res,'d')
                if(res.code=="001"){
                  this.dialogFormVisible=false
                  // localStorage.setItem('code',JSON.stringify(obj))
                  this.$store.commit('setUser',res.user)
                  this.$message.success('登录成功')
                    this.text1="欢迎"+this.ruleForm.userName
                }
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
     submitForm1(formName) {//注册
        this.$refs[formName].validate(async (valid) => {
          if (valid) {
                //  if(this.password!==this.qrpassword){
                //    this.$message.fail('两次密码不一致')
                //    return false
                //  }
                 let res=await registerUser(this.ruleForm1)
                 console.log(res,'153')
                 if(res.code=="001"){
                  this.$message.success('注册成功')
                 }else{
                  this.$message(res.msg)
                 }
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
  },
};
</script>


<style lang="scss">
 /* 注意这里是全局样式，不用scoped */
@import  '@/assets/reset.scss'; //引入全局样式重置库
footer {
  width: 100%;
  height: 500px;
  background-color: #2f2f2f;
  margin-top: 50px;
  .top {
    width: 100%;
    height: 200px;
    border-bottom: 1px solid #ccc;
   
    .top1 {
      width: 1200px;
      height: 100%;
      margin: 0 auto;
      ul {
        list-style: none;
        display: flex;
        justify-content: space-around;
        align-items: center;
        height: 200px;
        line-height: 200px;
        li {
          font-size: 25px;
          color: #fff;
          img {
            width: 33px;
            height: 40px;
            vertical-align: text-bottom;
          }
        }
      }
    }
  }

  .bottom {
    width: 100%;
    height: 300px;
    .bottom1 {
      width: 1200px;
      height: 300px;
      line-height: 60px;
      text-align: center;
      margin: 0 auto;
      margin-top: 42px;
      a {
        font-size: 20px;
        color: #ccc;
        margin-right: 20px;
        text-decoration: none;
      }
      a:hover{
        color: #fff;
      }
      p {
        font-size: 20px;
        color: #ccc;
      }
    }
  }
}
*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
ul {
  list-style: none;
}
.li1 {
  float: left;
  // width: 150px;
  color: gray;
  margin-left: 30px;
}
.li1:hover {
  color: white;
}
.li2:hover{
  background-color: white;
  color: red;
}
.header {
  background-color: #3d3d3d;
  width: 100%;
  height: 50px;
  display: flex;
  line-height: 50px;
  justify-content: flex-end;

}
.title {
  display: flex;
  justify-content: space-around;
  align-items: center;
  .search {
    width: 250px;
  }
}

li {
  cursor: pointer;
}
.el-menu.el-menu--horizontal {
  border: none;
}
.box{
  width: 1200px;
  background-color: white;
  margin: 0 auto;
 
}
</style>
